<template>
  <div
    :class="{
      container: true,
      'prompt-box': true,
      'p-top': true,
      info: tipInfo.level === 'info',
      warning: tipInfo.level === 'warning',
    }">
    <h3 style="text-align: center">{{ tipInfo.msg }}</h3>
  </div>
</template>
<script setup>
import { onMounted, watch } from "vue"
import appStore from "@/stores"
import { storeToRefs } from "pinia"

const { tipInfo } = storeToRefs(appStore.homeviewStore)
const emits = defineEmits(["confirm", "back"])

const switchState = () => {
  const node = document.querySelector(".container.prompt-box.p-top")
  if (node === undefined) {
    return
  }
  if (tipInfo.value.isShow) {
    node.style.display = "block"
    setTimeout(() => {
      node.style.opacity = 1
      node.style.top = "7%"
    }, 100)
  } else {
    node.style.opacity = 0
    node.style.top = "-7%"
    setTimeout(() => {
      node.style.display = "none"
    }, 100)
  }
}
watch(
  () => tipInfo.value.isShow,
  () => {
    switchState()
  }
)
onMounted(() => {
  switchState()
})
</script>
<style scoped>
.container {
  width: 300px;
  padding: 10px;
  background-color: var(--bg-color);
  box-shadow: 0px 1px 5px var(--shadow);
  transition: var(--transition);
  z-index: 1005;
}

.prompt-box {
  position: fixed;
  padding: 16px 0;
  border-radius: var(--border-radius);
  box-shadow: 0px 1px 5px var(--shadow);
  transition: var(--transition);
}
.p-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: antiquewhite;
}
.p-top {
  display: none;
  opacity: 0;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.info {
  background-color: rgb(67, 189, 122) !important;
}
.warning {
  background-color: rgb(255, 66, 66) !important;
}
.attention {
  background-color: rgb(245, 210, 83) !important;
}

@media (max-width: 480px) {
  .container {
    width: 80%;
  }
}
</style>
